<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>this</title>
</head>
<body>
<script>
  
//   // 通过this绑定到全局对象
//   this.a2 = 20;

//   // 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身
//   var a1 = 10;

//   // 仅仅只有赋值操作，标识符会隐式绑定到全局对象
//   a3 = 30;

//   // 输出结果会全部符合预期


// function foo(a) {
//   'use strict';
//   // 严格模式下无法访问 arguments.callee
//   // console.log(arguments.callee)
//   console.log(this)
// }

// foo(10)

// demo01
// var a = 20;

// var obj = {
//   a: 40
// }

// function fn() {
//   console.log('fn this: ', this);

//   function foo() {
//     console.log(this.a);
//   }
//   foo();
// }

// fn.call(obj);
// fn();


// demo02

// 'use strict';

// var a = 20;
// function foo() {
//   var a = 1;
//   var obj = {
//     a: 10,
//     c: this.a + 20
//   }
//   return obj.c;

// }

// console.log(window.foo()); // 20
// console.log(foo()); // 报错 TypeError


// demo03
// var a = 20;
// var foo = {
//   a: 10,
//   getA: function () {
//     return this.a;
//   }
// }
// console.log(foo.getA()); // 10

// var test = foo.getA;
// console.log(test()); // 20

// demo04
// function foo() {
//   console.log(this.a)
// }

// function active(fn) {
//   fn();
// }

// var a = 20;
// var obj = {
//   a: 10,
//   getA: foo,
//   active: active
// }

// active(obj.getA); // 输出的值是多少？
// obj.active(obj.getA); // 输出的值是多少?

  // demo05
// var n = 'window';
// var object = {
//   n: 'object',
//   getN: function () {
//     return function () {
//       return this.n;
//     }
//   }
// }

// console.log(object.getN()()); // 输出的结果是多少？


// function fn(num1, num2) {
// return this.a + num1 + num2;
// }

// var a = 20;
// var object = { a: 40 }

// // 正常执行
// fn(10, 10); // 40

// // 通过call改变this指向
// fn.call(object, 10, 10); // 60

// // 通过apply改变this指向
// fn.apply(object, [10, 10]); // 60


function fn(num1, num2) {
  return this.a + num1 + num2;
}

var a = 20;
var object = { a: 40 }

var _fn = fn.bind(object, 1, 2);

console.log(_fn === fn); // false
_fn(); // 43
_fn(1, 4); // 43 因为参数被绑定，因此重新传入参数是无效的
</script>
</body>
</html>
